<template>
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        <div class="card">
            <div>简单的图片转base64的hook</div>
           <img src="../assets/images/175afee632df323a0908232430ccd97e.jpg" />
       </div>
        <div class="card" v-resize="sizeChange" style="resize: both;overflow: hidden;">
            <div>hooks+质量</div>
            <div>需求：实现一个函数同时支持 hook 和自定义指令 去监听dom宽高变化</div>
           <img src="../assets/images/175afee632df323a0908232430ccd97e.jpg" />
       </div>
    </div>
</template>

<script setup lang="ts">
import  {useBase64 } from '../hooks/index'
useBase64({el:'img'}).then((res) => {
    console.log(res)
})
const sizeChange = (e:any)=>{
    console.log(e)
}
</script>

<style scoped>
    .card {
        padding: 10px;
        border-radius: 20px;
        width: 300px;
        height: 300px;
        background-color: #fff;  
    }
    img {
        width: 60%;
        height: 60%;
    }
</style>